<template>
  <div class="products">
    <div class="products_title">{{shopName}}</div>
    <div class="products_wrapper">
      <div class="products_list">
        <div v-for="item in productList" :key="item.id" class="products_item">
          <img class="products_item_img" :src="item.imgUrl" alt="">
          <div class="products_item_detail">
            <h4 class="products_item_title">{{item.name}}</h4>
            <p class="products_item_price">
              <span>
                <span class="products_item_yen">&yen;</span>
                {{item.price}} x {{item.count}}
              </span>
              <span class="products_item_total">
                <span class="products_item_yen">&yen;</span>
                {{(item.price * item.count).toFixed(2)}}
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { useRoute } from 'vue-router'
import { useCommonCartEffect } from '@/effects/cartEffects'
export default {
  name: 'ProductList',
  setup () {
    const route = useRoute()
    const shopId = route.params.id
    const { productList, shopName } = useCommonCartEffect(shopId)
    return { productList, shopName }
  }
}
</script>
<style lang="scss" scoped>
@import '@/style/viriables.scss';
@import '@/style/mixins.scss';
.products{
  margin: .16rem .18rem .1rem .18rem;
  background-color: #fff;
  &_title{
    padding: .16rem;
    font-size: .16rem;
    color: #333;
  }
  &_wrapper{
    margin: 0 .18rem;
    overflow-y: scroll;
    position: absolute;
    left: 0;
    right: 0;
    bottom: .6rem;
    top: 2.6rem;
  }
  &_list{
    background-color: #fff;
    padding-bottom: .16rem;
  }
  &_item{
    position: relative;
    display: flex;
    padding: 0 .16rem .16rem .16rem;
    &_img{
      width: .46rem;
      height: .46rem;
      margin-right: .16rem;
    }
    &_detail{
      flex: 1;
    }
    &_title{
      margin: 0;
      line-height: .2rem;
      font-size: .14rem;
      color: $content-fontcolor;
      @include ellipse;
    }
    &_price{
      display: flex;
      margin: .06rem 0 0 0;
      line-height: .2rem;
      font-size: .14rem;
      color: $highlight-fontColor;
    }
    &_total{
      text-align: right;
      flex: 1;
      color: #000;
    }
    &_yen{
      font-size: .12rem;
    }
  }
}
</style>
